import { useEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { useWindowSize } from "./useWindowSize";

function App({ name }: { name: string }) {
	interface User {
		name: string;
		age: number;
	}
	type k1 = keyof User;
	const test: k1 = "name";

	const person: User = {
		name: "tom",
		age: 18
	};
	type k2 = typeof person;
	const test2: k2 = {
		name: "tom",
		age: 18
	};

	type keys = "id" | "name" | "age";
	type user = {
		[P in k1]: string | number;
	};
	const a: user = {
		name: "jack",
		age: 18
	};
	console.log(a);

	const [count, setCount] = useState(0);
	const [total, setTotal] = useState(0);
	useEffect(() => {
		setTotal(count * 5);
	}, [count]);

	useEffect(() => {
		let t = setInterval(() => {
			setCount(count => count + 1);
		}, 1000);
		return () => {
			clearInterval(t);
		};
	}, []);

	const [windowSize] = useWindowSize();

	return (
		<div className="App">
			<p>count:{count}</p>
			<p>total:{total}</p>
			<button onClick={() => setCount(count + 1)}>点击</button>
			<p>window width:{windowSize.width}</p>
			<p>window height:{windowSize.height}</p>
		</div>
	);
}

export default App;
